// 屏幕适配组合式函数

import { ref, onMounted, onUnmounted } from 'vue'
import type { ScreenInfo, LayoutConfig } from '~/utils/screen-utils'
import { getScreenInfo, getLayoutConfig, watchScreenChanges, isHighResolutionScreen } from '~/utils/screen-utils'

export function useScreenAdaptation() {
  const screenInfo = ref<ScreenInfo>({
    width: 1920,
    height: 1080,
    ratio: 16/9,
    type: 'desktop',
    dpi: 1,
    isHighDPI: false
  })
  
  const layoutConfig = ref<LayoutConfig>({
    containerMaxWidth: 1400,
    sidebarWidth: 210,
    rightSidebarWidth: 310,
    fontSize: 14,
    spacing: 15,
    cardPadding: 16
  })
  
  const isHighRes = ref(false)
  let cleanup: (() => void) | null = null
  
  onMounted(() => {
    // 初始化屏幕信息
    screenInfo.value = getScreenInfo()
    layoutConfig.value = getLayoutConfig(screenInfo.value.type)
    isHighRes.value = isHighResolutionScreen()
    
    // 开始监听屏幕变化
    cleanup = watchScreenChanges((newScreenInfo, newConfig) => {
      screenInfo.value = newScreenInfo
      layoutConfig.value = newConfig
      isHighRes.value = isHighResolutionScreen()
    })
  })
  
  onUnmounted(() => {
    cleanup?.()
  })
  
  // 计算属性
  const isMobile = computed(() => screenInfo.value.type === 'mobile')
  const isTablet = computed(() => screenInfo.value.type === 'tablet')
  const isDesktop = computed(() => screenInfo.value.type === 'desktop')
  const is2K = computed(() => screenInfo.value.type === '2k')
  const is4K = computed(() => screenInfo.value.type === '4k')
  const is5K = computed(() => screenInfo.value.type === '5k')
  const isUltraWide = computed(() => screenInfo.value.type === 'ultrawide')
  
  // 响应式类名
  const screenClass = computed(() => `screen-${screenInfo.value.type}`)
  const highDpiClass = computed(() => isHighRes.value ? 'high-dpi' : '')
  
  return {
    // 响应式数据
    screenInfo: readonly(screenInfo),
    layoutConfig: readonly(layoutConfig),
    isHighRes: readonly(isHighRes),
    
    // 计算属性
    isMobile,
    isTablet,
    isDesktop,
    is2K,
    is4K,
    is5K,
    isUltraWide,
    
    // 类名
    screenClass,
    highDpiClass,
    
    // 工具方法
    getScreenType: () => screenInfo.value.type,
    getScreenRatio: () => screenInfo.value.ratio,
    getScreenSize: () => ({ width: screenInfo.value.width, height: screenInfo.value.height }),
    isWideScreen: () => screenInfo.value.ratio > 1.8,
    isPortrait: () => screenInfo.value.ratio < 1
  }
}

// 简化的屏幕检测组合式函数
export function useScreenDetection() {
  const screenType = ref<string>('desktop')
  const isHighDPI = ref(false)
  
  const updateScreenInfo = () => {
    const info = getScreenInfo()
    screenType.value = info.type
    isHighDPI.value = info.isHighDPI
  }
  
  onMounted(() => {
    updateScreenInfo()
    
    const handleResize = () => {
      setTimeout(updateScreenInfo, 100)
    }
    
    window.addEventListener('resize', handleResize)
    
    onUnmounted(() => {
      window.removeEventListener('resize', handleResize)
    })
  })
  
  return {
    screenType: readonly(screenType),
    isHighDPI: readonly(isHighDPI)
  }
}

// 布局配置组合式函数
export function useLayoutConfig() {
  const { screenInfo } = useScreenAdaptation()
  
  const config = computed(() => {
    const baseConfig = getLayoutConfig(screenInfo.value.type)
    
    // 根据屏幕比例进行微调
    if (screenInfo.value.ratio > 2.2) {
      // 超宽屏优化
      return {
        ...baseConfig,
        containerMaxWidth: Math.min(baseConfig.containerMaxWidth * 1.2, 4500),
        spacing: baseConfig.spacing * 1.1
      }
    }
    
    return baseConfig
  })
  
  return {
    config: readonly(config)
  }
}

